<template>
  <el-table :data="list" border>
    <!-- <el-table-column type="expand">
      <template slot-scope="props">
        <table border="1" cellpadding="0" cellspacing="0">
          <tr>
            <td>ID</td>
            <td>时间</td>
            <td>耗时/ms</td>
            <td>方法名称</td>
            <td>服务名称</td>
            <td>参数</td>
          </tr>
          <tr v-for="(item, index) in props.row.actions" :key="index">
            <td>{{ item.auditLogId }}</td>
            <td>
              {{ dayjs(item.executionTime).format('YYYY-MM-DD HH:mm:ss') }}
            </td>
            <td>{{ item.executionDuration }}</td>
            <td>{{ item.methodName }}</td>
            <td>{{ item.serviceName }}</td>
            <td>{{ item.parameters }}</td>
          </tr>
        </table>
      </template>
    </el-table-column> -->

    <el-table-column align="center" label="用户名">
      <template slot-scope="scope">
        {{ scope.row.userName }}
      </template>
    </el-table-column>
    <el-table-column align="center" label="请求地址">
      <template slot-scope="scope">
        {{ scope.row.url }}
      </template>
    </el-table-column>
    <el-table-column align="center" label="请求方法">
      <template slot-scope="scope">
        {{ scope.row.httpMethod }}
      </template>
    </el-table-column>
    <el-table-column align="center" label="状态码">
      <template slot-scope="scope">
        {{ scope.row.httpStatusCode }}
      </template>
    </el-table-column>
    <el-table-column align="center" label="耗时/ms">
      <template slot-scope="scope">
        {{ scope.row.executionDuration }}
      </template>
    </el-table-column>
    <el-table-column align="center" label="异常信息">
      <template slot-scope="scope">
        <el-tooltip class="item" effect="dark" placement="top">
          <div slot="content">
            {{ scope.row.exceptions }}
          </div>
          <p class="browserInfo">{{ scope.row.exceptions }}</p>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column align="center" label="客户端地址">
      <template slot-scope="scope">
        {{ scope.row.clientIpAddress }}
      </template>
    </el-table-column>
    <el-table-column align="center" label="浏览器信息">
      <template slot-scope="scope">
        <el-tooltip
          class="item"
          effect="dark"
          :content="scope.row.browserInfo"
          placement="top"
        >
          <p class="browserInfo">{{ scope.row.browserInfo }}</p>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column align="center" label="执行时间">
      <template slot-scope="scope">
        {{ dayjs(scope.row.executionTime).format('YYYY-MM-DD HH:mm:ss') }}
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss" scoped></style>
